<!DOCTYPE html>
<html>
<head>
<title>Cursor: should update after image loaded even when stationary</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#target {
  height: 500px;
  width: 500px;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
var cursorTest = async_test('Test cursor update after image loaded');
cursorTest.step(function() {
    assert_not_equals(window.eventSender, undefined, 'This test requires eventSender.');

    var target = document.getElementById('target');
    var rect = target.getBoundingClientRect();
    eventSender.mouseMoveTo(rect.left + 3, rect.top + 3);

    // Wait for condition until timeout.
    function waitForCondition(condition, completion) {
        if (condition()) {
            completion();
        } else {
            requestAnimationFrame(() => waitForCondition(condition, completion));
        }
    }

    function testSetCursorImage(url, expectedCursorInfo, complete) {
        target.style.cursor = `url(${url}),auto`;
        waitForCondition(() => internals.getCurrentCursorInfo() != expectedCursorInfo, cursorTest.step_func(() => {
            complete();
        }));
    }

    testSetCursorImage('resources/greenbox.png', 'type=Custom hotSpot=0,0 image=25x25', () => {
        testSetCursorImage('resources/abe.png', 'type=Custom hotSpot=0,0 image=76x103', () => {
            cursorTest.done();
        })
    });
});
</script>
</body>
</html>
